
<template>
  <div>
    <el-button type="text" style="float: left;margin-left: 15px;" @click="btnClick">
      <i v-show="!store.state.sidebarCollapse" class="el-icon-s-fold" style="font-size: 26px;"></i>
      <i v-show="store.state.sidebarCollapse" class="el-icon-s-unfold" style="font-size: 26px;"></i>
    </el-button>
    <el-menu
      style="float: right"
      class="nav-el-menu"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#fff"
    >
      <el-menu-item index="1">
        <el-badge :value="1" class="elBadge" type="primary">
          <i class="el-icon-user-solid" style="color: #fff"></i>
        </el-badge>
      </el-menu-item>
      <el-submenu index="2">
        <template #title>{{loginName}}</template>
        <el-menu-item index="2-1">修改密码</el-menu-item>
        <el-menu-item index="2-2">退出登录</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script setup lang="ts">
import { reactive,ref } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
const router = useRouter()
const store = useStore()
let loginName = ref('')
const handleSelect = (index) => {
  if (index === "2-2") {
    localStorage.removeItem("vuexCache");
    localStorage.removeItem('loginName');
    router.push({name: 'login'})
  }
};
function btnClick () {
  store.commit('setSidebarCollapse')
}
if (localStorage.getItem('loginName')) {
  loginName.value = localStorage.getItem('loginName')
}


</script>
<style lang="scss">
.elBadge .el-badge__content.is-fixed {
  top: 18px !important;
}
.nav-el-menu .el-submenu__title,
.nav-el-menu .el-menu-item {
  border-bottom: none !important;
}
</style>